import React, { useState } from 'react';
import './index.less'
import { InfiniteScroll, List, PullToRefresh } from 'antd-mobile';
import { mockRequest } from './mock';

// 图片
import t from '../../../imgs/网红好店.png';
import vx from '../../../imgs/wx.png';

type Props = {};

export default function index({ }: Props) {
  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  async function loadMore() {
    const append = await mockRequest();
    setData((val) => [...val, ...append]);
    setHasMore(append.length == 4);
    console.log(append);
  }
  return (
    <div className="photo">
      <ul>
        {data.map((item, index) => {
          return (
            <li key={index}>
              <img src={t} alt="" />
              <h4>{item.introduce}</h4>
              <div className="price">
                <span>￥{item.price}</span>
              </div>
              <div className="shop">
                <img src={vx} alt="" />
                <span> {item.shop}</span>
              </div>
            </li>
          );
        })}
      </ul>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  );
}
